<div class="row d-flex align-items-center p-2 mt-2 bg-light-grey" [ngClass]="{'item-link': eventIndicator.category > 0, 'secondary-text': eventIndicator.category === 0}" (click)="loadDetails()">
    <div class="col-5">
        <a *ngIf="eventIndicator.category > 0" href="javascript:;;" class="text-link">
            <img [attr.src]="getCategoryIcon(eventIndicator)" class="category-icon-sm mr-1" />
            {{ eventIndicator.name }}
        </a>
        <span *ngIf="eventIndicator.category === 0">
            <img [attr.src]="getCategoryIcon(eventIndicator)" class="category-icon-sm mr-1" />
            {{ eventIndicator.name }}
        </span>
    </div>
    <div class="col-7">
        <div class="row">
            <div class="col numeric-column">
                Category {{ eventIndicator.category }}
            </div>
            <div class="col numeric-column">{{ eventIndicator.weight.value / 100 | percent:'1.1-1' }}</div>
            <div class="col numeric-column">{{ eventIndicator.weightedScore.value | number:'1.1-1' }}</div>
        </div>
    </div>
</div>

<app-modal [id]="'indicatorEvent' + getCleanIndicatorCode(eventIndicator.code)" [size]="'modal-xl'">
    <div class="app-modal-header">
        Indicator Details
    </div>
    <div class="app-modal-body">

            <div class="row d-flex align-items-center">
                <div class="col-sm-6">
                    <div class="indicator-name">
                        {{ eventIndicator.name }}
                    </div>
                </div>
                <div *ngIf="eventIndicator.weightedScore" class="col-sm-6">
                    <div class="row d-flex align-items-center value">
                        <div class="col-3">
                            {{ eventIndicator.score.value | number:'1.0-0' }}
                        </div>
                        <div class="col-3 offset-1">
                            {{ eventIndicator.weight.value | number:'1.1-1' }}%
                        </div>
                        <div class="col-4 offset-1">
                            {{ eventIndicator.weightedScore.value | number:'1.1-1' }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-4">Raw Score</div>
                        <div class="col-4">Weight</div>
                        <div class="col-4">Weighted Score</div>
                    </div>
                </div>
            </div>

            <div *ngIf="indicator" class="text-center pt-3">
                <hr />
                <div class="pl-5 pr-5 pt-2 indicator-name">
                    <img [attr.src]="getCategoryIcon(eventIndicator)" class="category-icon mr-1" />
                    Category {{ eventIndicator.category }} Event - {{ indicator.eventCategoryText }}
                </div>
            </div>

            <div *ngIf="eventIndicator.category != 1 && eventIndicator.category != 2 && indicator">
                <hr />
                <div class="d-flex align-items-start">
                    <div *ngIf="indicator.outlookText" class="flex-fill p-2 w-50">
                        <h5>Outlook - {{ indicator.outlookLabel }} <img [attr.src]="'/assets/icons-svg/icon-outlook-'+(indicator.outlookLabel).toLowerCase()+'.svg'" class="outlook-icon ml-2" /></h5>
                        <p [innerHtml]="indicator.outlookText"></p>
                        <p *ngFor="let comment of indicator.outlookComments">{{ comment }}</p>
                    </div>

                    <div *ngIf="indicator.controversySummary != '' || indicator.eventJustification != ''" class="flex-fill p-2 w-50">
                        <h5>Assessment</h5>
                        <p [innerHtml]="indicator.controversySummary"></p>
                        <p [innerHtml]="indicator.eventJustification"></p>
                    </div>
                </div>
            </div>

            <div *ngIf="indicator">
                <hr />
                <div *ngIf="indicator" class="d-flex align-items-start">
                    <div class="w-50 p-2">
                        <h5>Incident History</h5>
                        <div mapChart *ngIf="indicator && locations" [chartID]="'mapChart' + indicator.code" [currentCompany]="indicator.companyId"
                            [currenEvent]="indicator.code" [chartData]="locations">
                            <div id="{{'mapChart' + indicator.code}}" style="height:300px;width:100%;"></div>
                        </div>

                        <div *ngIf="indicator.locationsText">
                            <h5>Locations</h5>
                            {{ indicator.locationsText }}
                        </div>
                        <div *ngIf="indicator.tags">
                            <h5>Tags</h5>
                            <span *ngFor="let tag of splitTags(indicator.tags)" class="criteria-tag">
                                {{ indicator.tags }}
                            </span>
                        </div>
                    </div>

                    <div *ngIf="indicator?.incidents" class="w-50 p-2 incidents-list">
                        <div class="col-sm-12" style="margin-bottom:15px" *ngFor="let incident of indicator.incidents">
                            <p class="boldText" style="padding:0;margin:0 0 4px 0px">{{incident.mainIncident.name}}</p>
                            <p style="margin:0 0 4px 0" *ngIf="incident.mainIncident.externalUrl"><a href="{{incident.mainIncident.externalUrl}}" target="_blank">{{incident.mainIncident.source}} - {{incident.mainIncident.date}}</a></p>
                            <p style="margin:0 0 4px 0" *ngIf="!incident.mainIncident.externalUrl">{{incident.mainIncident.source}} - {{incident.mainIncident.date}}</p>

                            <div style="padding:0 0 0 15px;margin:0 0 4px 0" *ngFor="let update of incident.updates">
                                <p class="boldText" style="margin:0 0 4px 0">{{update.name}}</p>

                                <p style="margin:0 0 4px 0" *ngIf="update.externalUrl"><a href="{{update.externalUrl}}" target="_blank">{{update.source}} - {{update.date}}</a></p>
                                <p style="margin:0 0 4px 0" *ngIf="!update.externalUrl">{{update.source}} - {{update.date}}</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>


    </div>
</app-modal>




